<div #diagramcontainer style="height: 800px; width: 100%;">
  <div #ref class="diagram-container" style="padding: 0.1rem">

  </div>

  <nz-collapse style="position: absolute;
  right: 30px;
  top: 200px;
  width: 500px;">
    <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active"
      [nzDisabled]="panel.disabled">

      <form nz-form se-container="1" labelWidth="100" gutter="32">
        <se label="Id" error="Id">
          <input nz-input placeholder="" [(ngModel)]="form.id" readonly="readonly"
            [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
        </se>
        <se label="对象Id" error="对象Id" *ngIf="false">
          <input nz-input placeholder="" [(ngModel)]="form.flowid" readonly="readonly"
            [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
        </se>

        <se label="对象名称" error="对象名称" required>
          <input nz-input placeholder="" [(ngModel)]="form.flowname" readonly="readonly"
            [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
        </se>

        <se label="备注" error="备注">
          <input nz-input placeholder="" [(ngModel)]="form.flowdesc" name="flowdesc"
            [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
        </se>

        <!-- <se label="网关处理器" error="网关处理器" *ngIf="form.nodeProcessClassVisable">
            <input
              nz-input
              [(ngModel)]="form.nodeProcessClass"
              placeholder="网关处理器"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)"
            />
          </se> -->

        <se label="条件表达式" error="条件表达式" *ngIf="form.conditionexpressionVisable">
          <textarea nz-input [(ngModel)]="form.conditionexpression" placeholder="条件表达式"
            [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)"></textarea>
        </se>

        <se label="脚本类型" error="脚本类型" *ngIf="form.flowscripttypeVisable">
          <nz-select [(ngModel)]="form.flowscripttype" [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="flowscripttypeChange($event)">
            <nz-option nzValue="javascript" nzLabel="javascript"></nz-option>
            <nz-option nzValue="executor" nzLabel="executor"></nz-option>
            <nz-option nzValue="python" nzLabel="python"></nz-option>
            <nz-option nzValue="sql" nzLabel="sql"></nz-option>
            <nz-option nzValue="lua" nzLabel="lua"></nz-option>
            <nz-option nzValue="csharp" nzLabel="csharp"></nz-option>

          </nz-select>
        </se>
        <se label="执行器" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
          <nz-select [(ngModel)]="form.nodeProcessClass" [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)">

            <nz-option *ngFor="let option of executors" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>


          </nz-select>
        </se>


        <se label="执行器参数(JSON)" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">

          <nz-code-editor [nzToolkit]="toolkit" [class.full-screen]="fullScreen" (ngModelChange)="ngModelChange($event)"
            style="width: 100%; height: 500px; padding-top: 1rem" class="editor" [(ngModel)]="form.nodeProcessParams"
            [ngModelOptions]="{ standalone: true }" [nzEditorOption]="{ theme: 'vs',language: 'json' }">
          </nz-code-editor>

        </se>

        <se label="脚本" error="脚本" *ngIf="form.flowscriptVisable">
          <nz-code-editor [nzToolkit]="toolkit" [class.full-screen]="fullScreen" (ngModelChange)="ngModelChange($event)"
            style="width: 100%; height: 500px; padding-top: 1rem" class="editor" [(ngModel)]="form.flowscript"
            [ngModelOptions]="{ standalone: true }" [nzEditorOption]="{ theme: 'vs',language: 'csharp' }">
          </nz-code-editor>
        </se>
      </form>



    </nz-collapse-panel>
  </nz-collapse>



  <ng-template #toolkit>
    <i nz-icon [class.active]="fullScreen" nz-tooltip nzTooltipTitle="Toggle Fullscreen"
      [nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'" (click)="toggleFullScreen()"></i>
  </ng-template>
  <ng-template #extraTemplate>
    <a>More</a>
  </ng-template>


  <!-- <nz-collapse>
        <nz-collapse-panel [nzHeader]="nzHeader" nzExpandIconPosition="right" nzActive="false"> -->

  <!-- </nz-collapse-panel>
      </nz-collapse> -->
</div>